<template>
	<view style="width: 100%; height: 100%;">
		<scroll-view class="tabs" :class="tabs.length <= 4 ? 'few-tabs' : 'many-tabs'" :style="{'--height': height + 'px'}" :scroll-x="tabs.length > 4" :scroll-left="tabScrollLeft" scroll-with-animation="true">
			<view class="tabs-content">
				<view v-for="(tab, index) in tabs" class="tab-item" :class="current==index&&!$slots.activeImg&&'active'" :key="index" @click="onTabClick(index)">
					<view :style="current==index&&activeColor?'color:'+activeColor+';':''">{{tab.title}}</view>
					<slot v-if="current==index" name="activeImg"></slot>
				</view>
			</view>
		</scroll-view>
		<swiper :current="current" class="swiper-box" @change="onChange" :style="{'--height': height + 'px'}">
			<swiper-item v-for="(item ,index) in tabs" :key="index">
				<scroll-view 
					scroll-y="true" 
					:scroll-top="index === current ? scrollTop : 0"
					style="height: 100%;" 
					@scrolltolower="scrolltolower"
				>
					<!-- #ifdef MP -->
					<slot name="{{'content' + index}}"></slot>
					<!-- #endif -->
					<!-- #ifndef MP -->
					<slot :name="'content'+index"></slot>
					<!-- #endif -->
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'swiperTab',
		props: {
			currentTab: {
				type: Number,
				default: 0
			},
			tabs: {
				type: Array,
				default: []
			},
			activeColor: {
				type: String,
				default: '#FFFFFF'
			},
			height: {
				type: Number,
				default: 38
			}
		},
		data() {
			return {
				current: this.currentTab,
				scrollTop: 0,
				tabScrollLeft: 0,
				scrollTimer: null
			};
		},
		watch: {
			currentTab: {
				handler(newVal) {
					this.current = newVal;
				},
				immediate: true
			},
			current: {
				handler(newVal, oldVal) {
					// 简化滚动逻辑，只有当值真正改变且不是初始化时才滚动
					if (oldVal !== undefined && newVal !== oldVal) {
						this.scrollToTabSimple(newVal);
					}
				}
			}
		},
		methods: {
			onTabClick(index) {
				// 用户点击tab时，立即响应
				this.current = index;
				this.$emit('change', index);
			},
			onChange(e) {
				this.current = e.detail.current;
				this.$emit('change', e.detail.current);
			},
			scrolltolower(e) {
				this.$emit('onReachBottom', this.current);
				console.log(this.current)
			},
			scrollToPosition(scrollTop) {
				this.scrollTop = scrollTop
			},
			scrollToTabSimple(index) {
				// 只有tab数量 > 4个时才滚动
				if (this.tabs.length <= 4) return;

				// 取消之前的定时器
				if (this.scrollTimer) {
					clearTimeout(this.scrollTimer);
				}

				// 极简的滚动逻辑
				this.scrollTimer = setTimeout(() => {
					const estimatedTabWidth = 180;
					this.tabScrollLeft = Math.max(0, index * estimatedTabWidth - 150);
				}, 10);
			}
		}
	}
</script>
<style>
	swiper-tab {
		display: block;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.tabs {
		width: 100%;
		height: var(--height);
		background-color: #FFFFFF;
		white-space: nowrap;

		.tabs-content {
			display: flex;
			align-items: center;
			height: 100%;
			white-space: nowrap;
			width: 100%;
		}

		.tab-item {
			text-align: center;
			line-height: 73rpx;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			white-space: nowrap;

			&.active {
				/* color: $uni-color-primary; */
				border-bottom: 4rpx solid var(--active-color, #3766D7);
			}
		}

		/* 当tab数量少时，平分宽度 */
		&.few-tabs .tabs-content {
			justify-content: space-around;
		}

		&.few-tabs .tab-item {
			flex: 1;
			min-width: auto;
			padding: 0 16rpx;
		}

		/* 当tab数量多时，启用滚动 */
		&.many-tabs .tab-item {
			flex: none;
			flex-shrink: 0;
			min-width: 120rpx;
			padding: 0 24rpx;
		}
	}

	.swiper-box {
		width: 100%;
		height: calc(100% - var(--height));
		overflow: auto;
	}
</style>